<template>
  <div class="delivery">
    <el-row :gutter="20">
      <el-col :span="7">
        <div class="form-item">
          <span class="title">配送时间查询</span>
          <el-date-picker
            v-model="dateList"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
          ></el-date-picker>
        </div>
      </el-col>

      <el-col :span="5">
        <div class="form-item">
          <span class="title">订单状态</span>
          <el-select v-model="param.status" placeholder="请选择">
            <el-option
              v-for="item in orderStatusList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="form-item">
          <span class="title">配送状态查询</span>

          <el-select v-model="param.postStatus">
            <el-option
              v-for="item in postStatus"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="form-item">
          <span class="title">订单来源查询</span>
          <el-select v-model="param.sourceType" placeholder="请选择">
            <el-option
              v-for="item in sourceTypeList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="8">
        <div class="form-item">
          <el-select v-model="deliveryWay" style="width:30%" @change="changeEvent">
            <el-option
              v-for="item in deliveryWayList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
          <el-input placeholder="请输入商品名称" v-model="param.skuName" v-if="deliveryWay=='0'"></el-input>
          <el-input placeholder="请输入订单编号" v-model="param.orderNum" v-if="deliveryWay=='1'"></el-input>
        </div>
      </el-col>
      <el-col :span="7">
        <div class="form-item">
          <span class="title">调度状态</span>
          <el-select v-model="param.isDispatch" placeholder="请选择">
            <el-option
              v-for="item in isDispatchList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </div>
      </el-col>
      <el-col :span="9">
        <div class="form-item button-container">
          <el-button type="primary" @click="searchCustomer" icon="el-icon-search">查询</el-button>
          <el-button type="primary" @click="resetSearchCotnet" icon="el-icon-refresh">重置</el-button>
          <el-button type="primary" @click="batch" icon="el-icon-refresh">批量指派</el-button>
          <el-button type="primary" @click="exportexc" icon="el-icon-refresh">导出表格</el-button>
        </div>
      </el-col>
    </el-row>

    <div class="table-body" v-loading="isLoading">
      <el-table
        :data="tableData"
        border
        @selection-change="handleSelectionChange"
        style="width: 100%;"
        class="tablebox"
        :expand-row-keys="expends"
        :row-key="getRowKeys"
      >
        <el-table-column width="55" type="expand" fixed="left">
          <template slot-scope="scope">
            <div class="tips">订单备注:{{scope.row.receveInfo}}</div>
            <div class="tips">异常原因:{{scope.row.receveInfo}}</div>
            <div class="tips">撤销原因:{{scope.row.receveInfo}}</div>
          </template>
        </el-table-column>

        <el-table-column type="selection" width="55" fixed="left" :reserve-selection="true"></el-table-column>
        <el-table-column prop="orderNum" label="订单编号" width="200" fixed="left"></el-table-column>
        <el-table-column prop="id" label="商品" width="320">
          <template slot-scope="scope">
            <div
              v-for="item in scope.row.skuDetail"
              :key="item.skuid"
              style="display: flex;align-items: center; background: #f5f5f5;line-height: 32px;margin-bottom:5px;border-radius:4px;padding:0 5px"
            >
              <el-image class="header-image" fit="cover" :src="item.skuImage"></el-image>
              <div>{{item.skuTitle}}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="sku" label="商品SKU" width="200">
          <template slot-scope="scope">
            <div
              v-for="item in scope.row.skuDetail"
              :key="item.skuid"
              style=" display: flex;align-items: center; background: #f5f5f5;margin-bottom:5px;border-radius:4px;padding:0 5px"
            >{{item.skuIndexs}}</div>
          </template>
        </el-table-column>

        <el-table-column prop="status" label="商品状态" width="100">
          <template slot-scope="scope">
            <div
              v-for="item in scope.row.skuDetail"
              :key="item.id"
              style="   display: flex;align-items: center; background: #f5f5f5;line-height: 32px;margin-bottom:5px;border-radius:4px;padding:0 5px"
            >{{item.proStatus}}</div>
          </template>
        </el-table-column>
        <el-table-column prop="number" label="数量" width="80">
          <template slot-scope="scope">
            <div
              v-for="item in scope.row.skuDetail"
              :key="item.id"
              style="  display: flex;align-items: center;  background: #f5f5f5;line-height: 32px;margin-bottom:5px;border-radius:4px;padding:0 5px"
            >x{{item.skuNum}}</div>
          </template>
        </el-table-column>
        <el-table-column prop="ReceivingTime" label="收货时间" width="200"></el-table-column>
        <el-table-column prop="receveInfo" label="收货信息" width="200"></el-table-column>
        <el-table-column prop="orderSource" label="订单来源" width="100"></el-table-column>
        <el-table-column prop="deliveryStatus" label="配送状态" width="100"></el-table-column>
        <el-table-column prop="userName" label="送货员" width="100"></el-table-column>
        <el-table-column prop="totalpay" label="订单金额" width="100"></el-table-column>
        <el-table-column prop="retainage" label="应收尾款" width="100"></el-table-column>
        <el-table-column label="操作" fixed="right" width="120">
          <template slot-scope="scope">
            <el-button
              @click.native.prevent="designate(scope.row)"
              type="primary"
              plain
              size="small"
            >指派</el-button>
            <br />
            <el-button
              @click.native.prevent="deleteRow(scope.row)"
              type="danger"
              plain
              size="small"
            >撤销</el-button>
            <br />
            <el-button
              @click.native.prevent="designate(scope.row)"
              type="warning"
              plain
              size="small"
            >更换指派</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          background
          @current-change="currentPageChange"
          :page-size.sync="pageSize"
          :current-page.sync="pageNum"
          layout="prev, pager, next"
          :total="total"
        ></el-pagination>
      </div>
    </div>
    <el-dialog title="收货地址" :visible.sync="dialogFormVisible" center width="30%">
      <el-form :model="form">
        <el-form-item label="选择送货员">
          <el-select v-model="form.poster" placeholder="请选择配送人员">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="choosePoster">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { tInventoryrecordsSelectStatusApp } from "../../service/modules/stock";
//import ordertable from "../../components/ordertable";
export default {
  name: "",
  data() {
    return {
      orderStatusList: [
        {
          label: "有效",
          value: 1
        },
        {
          label: "撤销",
          value: 2
        }
      ],
      postStatus: [
        {
          label: "未配送",
          value: 1
        },
        {
          label: "配送中",
          value: 2
        },
        {
          label: "已配送",
          value: 3
        },
        {
          label: "配送异常",
          value: 4
        }
      ],
      sourceTypeList: [
        {
          label: "微信端",
          value: "1"
        },
        {
          label: "收银订单",
          value: "3"
        },
        {
          label: "微信客服",
          value: "4"
        }
      ],
      isDispatchList: [
        {
          label: "未调度",
          value: 0
        },
        {
          label: "已调度",
          value: 1
        }
      ],
      deliveryWayList: [
        {
          label: "商品名称",
          value: "0"
        },
        {
          label: "订单编号",
          value: "1"
        }
      ],
      tableData: [
        {
          sku: "12987122",
          name: "王小虎",
          Receiving: "2020-09-04 12:00~13:30",
          status: "3.2",
          number: 10,
          orderSource: "商城",
          deliveryman: "王子瑜",
          money: "¥200",
          retainage: "¥180",
          orderNum: "000000000000000000000",
          receveInfo:
            "王子瑜  13944142800  吉林省长春市净月旅游经济开发区小合台工业区金城街488号1楼102",
          headPic:
            "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
        },
        {
          sku: "12987123",
          name: "王小虎",
          Receiving: "2020-09-04 12:00~13:30",
          status: "4.43",
          number: 12,
          sourceType: "线下门店",
          deliveryman: "王子瑜",
          money: "¥200",
          retainage: "¥180",
          receveInfo:
            "王子瑜  13944142800  吉林省长春市净月旅游经济开发区小合台工业区金城街488号1楼102",
          headPic:
            "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
        },
        {
          sku: "12987124",
          name: "王小虎",
          Receiving: "324",
          status: "1.9",
          number: 9,
          orderSource: "线下门店",
          deliveryman: "王子瑜",
          money: "¥200",
          retainage: "¥180",
          receveInfo:
            "王子瑜  13944142800  吉林省长春市净月旅游经济开发区小合台工业区金城街488号1楼102",
          headPic:
            "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
        },
        {
          sku: "12987125",
          name: "王小虎",
          Receiving: "621",
          status: "2.2",
          number: 17,
          orderSource: "商店",
          deliveryman: "王子瑜",
          money: "¥200",
          retainage: "¥180",
          receveInfo:
            "王子瑜  13944142800  吉林省长春市净月旅游经济开发区小合台工业区金城街488号1楼102",
          headPic:
            "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
        },
        {
          sku: "12987126",
          name: "王小虎",
          Receiving: "539",
          status: "4.1",
          number: 15,
          orderSource: "线下门店",
          deliveryman: "王子瑜",
          money: "¥200",
          retainage: "¥180",
          receveInfo:
            "王子瑜  13944142800  吉林省长春市净月旅游经济开发区小合台工业区金城街488号1楼102",
          headPic:
            "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
        }
      ],
      deliveryWay: "0",
      dateList: [],
      param: {
        status: 1,
        postStatus: "",
        sourceType: "",
        sendstartTime: "",
        sendendTime: "",
        skuName: "",
        orderNum: "",
        isDispatch: ""
      },
      form: {
        poster: ""
      },
      activeName: "1",
      isLoading: false,
      pageNum: 1,
      pageSize: 10,
      total: 0,
      expends: [],
      dialogFormVisible: false, //弹出窗
      multipleSelection: [] //多选列表
    };
  },
  components: {},
  computed: {},
  beforeMount() {},
  mounted() {
    this.getlist();
  },
  methods: {
    getlist() {
      this.loading = true;
      this.$service
        .getDistributionList({
          distributionorder: this.param,
          queryRequest: {
            page: this.pageNum,
            size: 10
          }
        })
        .then(res => {
          this.loading = false;
          console.log(res);
          for (let i = 0; i < res.data.length; i++) {
            const element = res.data[i];
            element.retainage = "￥0";
            element.ReceivingTime =
              element.sendstartTime + "~" + element.sendendTime;
            element.receveInfo =
              element.receiver +
              " " +
              element.receiverMoble +
              " " +
              element.receiverState +
              " " +
              element.receiverCity +
              " " +
              element.receiverDistrict +
              " " +
              element.receiverAddress;
            if (element.sourceType == "1") {
              element.orderSource = "微信端";
            } else if (element.sourceType == "3") {
              element.orderSource = "收银订单";
            } else {
              element.orderSource = "微信客服";
            }
            if (element.postStatus == 1) {
              element.deliveryStatus = "未配送";
            } else if (element.postStatus == 2) {
              element.deliveryStatus = "配送中";
            } else if (element.postStatus == 3) {
              element.deliveryStatus = "已配送";
            } else {
              element.deliveryStatus = "配送异常";
            }
            element.totalpay = "￥" + element.totalpay / 100;
            for (let j = 0; j < element.skuDetail.length; j++) {
              const element1 = element.skuDetail[j];
              if (element1.proStatus == 0) {
                element1.proStatus = "无效";
              } else if (element1.proStatus == 1) {
                element1.proStatus = "待生产";
              } else if (element1.proStatus == 2) {
                element1.proStatus = "生产中";
              } else if (element1.proStatus == 3) {
                element1.proStatus = "已完成";
              } else {
                element1.proStatus = "异常";
              }
            }
          }
          this.tableData = res.data || [];
          this.totalCount = res.data.total || 0;
          this.getExpends();
        });
    },
    handleSelectionChange(val) {
      console.log(val);
      this.multipleSelection = val;
    },
    getExpends() {
      var Id = this.tableData.map(item => item.skuid);
      this.expends = Id;
    },
    getRowKeys(row) {
      return row.skuid;
    },
    changeEvent(e) {
      console.log(e);
      if (e == "0") {
        this.param.orderNum = "";
      } else {
        this.param.skuName = "";
      }
    },
    searchCustomer() {
      console.log(this.dateList, this.param);
      if (this.dateList.length != 0) {
        this.param.sendstartTime = new Date(this.dateList[0]).getTime();
        this.param.sendendTime = new Date(this.dateList[1]).getTime();
      }
      this.getlist();
    },
    resetSearchCotnet() {},
    batch() {
      if (this.multipleSelection.length == 0) {
        this.$message.error("请选择需要派送的订单");
        return;
      }
      //this.$service.getorderDispatchinPerson
      this.dialogFormVisible = true;
    },
    designate(index, data) {
      this.dialogFormVisible = true;
    },
    exportexc() {},
    currentPageChange(e) {
      this.pageNum = e;
      this.getlist();
    },
    choosePoster() {},
    deleteRow(index, data) {
      console.log(data);
    }
  },
  watch: {}
};
</script>
<style scoped>
.delivery .form-item {
  display: flex;
  justify-content: flex-start;
}
.delivery .form-item .title {
  width: 100px;
}
.tips {
  background: #fffaeb;
  color: #ff9900;
  line-height: 35px;
  padding: 0 10px;
}
</style>
